<template>
    <div class="param-info">
      <table v-for="(table, x) in paramInfo.sizes" class="info-param1"
             :key="x">
        <tr>
          <td v-for="(td, y) in table" :key="y">{{ td }}</td>
        </tr>
      </table>

      <table class="info-param2">
        <tr v-for="(info, index) in paramInfo.infos">
          <td>{{ info.key }}</td>
          <td>{{ info.value }}</td>
        </tr>
      </table>
      <!--判断paramInfo.image是否有这个数据  有就显示-->
      <div class="info-img" v-if="paramInfo.image !== ''">
        <img :src="paramInfo.image" alt="">
      </div>
    </div>
</template>

<script>
    export default {
      name: "",
      props:{
        paramInfo:{
          type: Object,
          default(){
            return {}
          }
        }
      }
    }
</script>

<style scoped>
  .param-info{
    padding: 16px 16px 8px 16px;
    margin: 20px 0 0 0;
    border-top: 3px solid #eeeeee;
    border-bottom: 3px solid #eeeeee;
  }
  .info-param1,.info-param2{
    width: 100%;
  }
  .info-param1 > tr{
    display: flex;
    justify-content: space-between;
    padding: 16px 30px 16px 0;
    /*height: 50px;*/
    /*line-height: 50px;*/
    border-bottom: 1px solid #eeeeee;
    color: black;
  }
  /*.info-param1:nth-child(2) > tr{*/
    /*justify-content: flex-start;*/
  /*}*/
  /*.info-param1:nth-child(2) > tr > td{*/
    /*padding-right: 40px;*/
  /*}*/
  .info-param2 > tr{
    display: flex;
    padding: 16px 30px 16px 0;
    border-bottom: 1px solid #eeeeee;
  }
  .info-param2 > tr > td:first-child{
    flex: 1;
  }
  .info-param2 > tr > td:last-child{
    flex: 3;
    color: var(--color-high-text);
  }
  .info-img img{
    display: block;
    width: 100%;
  }
</style>
